<template>
	<view class="warp">
		<!-- 页面顶部 -->
		<view class="top" :style="{height: 'calc(440rpx + '+StatusBar+'px)',paddingTop: StatusBar+'px'}">
			<image :src="imgWechatUrl+'/user/login-bg.png'" mode="widthFix" class="bg_img"></image>
			<image class="logo" src="/static/logo.png" mode="widthFix" />
			<view class="name">酒氏酒</view>
		</view>
		<view class="main">
			<!-- 输入手机号 start -->
			<view class="fu-input solid flex align-center padding-tb-24 padding-lr">
				<image class="fu-input-type " :src="imgWechatUrl+'/user/phone1.png'" mode="aspectFit" />
				<input class="fu-input-main" :placeholder="i18n['请输入手机号']" placeholder-class="placeholderClass"
					type="number" maxlength="11" v-model="phone" />
			</view>
			<!-- 输入手机号 end -->

			<!-- 输入验证码 start -->
			<view class="fu-input solid  flex align-center padding-tb-24 padding-lr margin-top-56">
				<image class="fu-input-type" :src="imgWechatUrl+'/user/yzm.png'" mode="aspectFit" />
				<input class="text-999 text-lg fu-input-main" :placeholder="i18n['请输入验证码']"
					placeholder-class="placeholderClass" type="number" maxlength="4" v-model="vercode" />
				<text @click="handleSendVerCode"
					class="text-df fu-get-verify">{{ beginning ? time + i18n['s后重新获取'] : i18n['获取验证码'] }}</text>
			</view>
			<!-- 输入验证码 end -->

			<!-- 立即登录按钮 start -->
			<view type="warn" :loading="is_click" class="fu-login-btn" shape="circle" @click="handleLogin">
				<text class="text-lg margin-left-sm">{{ i18n['立即登录'] }}</text>
			</view>
			<!-- 立即登录按钮 end -->
		</view>
		<!-- 隐私政策 start -->
		<view class="bottom-box">
			<view class="third-box" v-if="isShowAuth">
				<ThirdLogin></ThirdLogin>
			</view>
			<view class="fu-privacy margin-top">
				<view @click="changeCheck">
					<image class="checkbox-img" mode="aspectFit" :src="imgWechatUrl+'/user/check.png'" v-if="check"></image>
					<image class="checkbox-img" mode="aspectFit" :src="imgWechatUrl+'/user/unchecked.png'" v-else></image>
				</view>
				<text class="text-sm text-666">
					{{ i18n['阅读并同意'] }}
					<text class="fu-action" @click="goAhreement(15)">{{ i18n['《用户注册协议》'] }}</text>
					{{ i18n['与'] }}
					<text class="fu-action" @click="goAhreement(16)">{{ i18n['《隐私政策》'] }}</text>
				</text>
			</view>
		</view>
		<!-- 隐私政策 end -->
		<!-- 断网监测 start -->
		<fu-notwork></fu-notwork>
		<!-- 断网监测 end -->
	</view>
</template>

<script>
	// 引入验证方法
	import {
		validate
	} from '@/common/utils/index';
	import {
		SYSTEM_CONFIG
	} from "@/common/config.js";
	import ThirdLogin from '../../components/third-login/third-login.vue';
	export default {
		components: {
			ThirdLogin
		},
		data() {
			return {
				imgWechatUrl:this.imgWechatUrl,
				phone: '', // 手机号,@String
				vercode: '', // 验证码,@String
				is_click: false, // 立即登录按钮是否点击,@Boolean
				verCodeBtnLoading: false, // 是否显示加载图标,@Boolean
				time: 60, // 倒计时60S,@Number
				beginning: false, // 显示倒计时,@Boolean
				PAGE_BASE_URL: '/pages/user/login/', // 页面基础路径,@String
				timer: null, // 计时器,@Function
				check: false,
				isShowAuth:false,//上架规避
			};
		},
		onLoad() {
			this.$store.dispatch('getIsShelf');
			setTimeout(() => {
				if (global.isAvoid == 'release') {
					this.isShowAuth = true
				} else {
					this.isShowAuth = false
				}
			}, 300)
		},
		onUnload() {
			// 页面关闭时清除计时器，优化性能
			clearInterval(this.timer);
		},
		methods: {
			/**
			 * @event
			 * @description 去协议
			 */
			goAhreement(val) {
				this.$urouter.navigateTo({
					url: '/pages/user/login/user-agreement/index',
					params: {
						id: val
					}
				});
			},
			/**
			 * @event
			 * @description 是否同意用户协议
			 */
			changeCheck() {
				this.check = !this.check;
			},
			/**
			 * @event 立即登录按钮点击事件
			 */
			handleLogin() {
				if (!this.check) {
					this.$message.info(this.i18n['请阅读并勾选页面协议']);
					return false;
				}
				// 保存this
				let _this = this;

				// #ifdef APP-PLUS
				// @desc 隐藏安全键盘
				plus.key.hideSoftKeybord();
				// #endif

				// 如果按钮状态是加载中，直接return，防止用户多次点击
				if (_this.is_click) return;
				// 结构出来phone手机号，vercode验证码
				let {
					phone,
					vercode
				} = this;
				// 如果手机号为空就提示用户
				if (!phone) {
					this.$message.info(this.i18n['请输入手机号']);
					return false;
				}
				// 如果手机号不正确就提示用户
				if (!validate(phone, 'phone')) {
					this.$message.info(this.i18n['请正确输入手机号']);
					return false;
				}

				// 如果验证码为空就提示用户
				if (!vercode) {
					_this.$message.info(this.i18n['验证码不能为空']);
					return false;
				}
				// 上述验证都通过，将按钮的点击状态改为true
				_this.is_click = true;
				/**
				 * @desc 请求验证码登录接口
				 * @param {String} global.apiUrls.postUserMobileLogin - 请求的接口,v1/5c78dca45ebc1,
				 * @param {Object} {} - 携带参数
				 * @param {String} {}.mobile - 手机号
				 * @param {String} {}.code - 验证码
				 */
				this.$util.throttle(() => {
					_this.$api
						.post(global.apiUrls.postUserMobileLogin, {
							mobile: phone,
							code: vercode,
							user_source: SYSTEM_CONFIG.platform
						})
						.then(res => {
							// 如果返回code码为1，且数据存在
							if (res.data.code == 1 && res.data.data) {
								// 提示用户，后台返回的信息
								_this.$message.info(res.data.msg);
								/**
								 * @desc 向Vue发送事件
								 * @param {Object} res.data.data.userinfo - 后台返回来的用户信息
								 */
								_this.$store.commit('updateUserInfo', res.data.data.userinfo);

								setTimeout(() => {
									// 延迟800ms后返回
									uni.navigateBack();
								}, 800);
							} else {
								// 错误的情况下向用户发送后台返回来的长度
								_this.$message.info(res.data.msg);
							}
							// 把按钮的状态改为false
							this.is_click = false;
						});
				}, 2000, true)
			},
			/**
			 * @event 返回上一页
			 */
			BackPage() {
				uni.navigateBack({
					delta: 1
				});
			},
			/**
			 * @event 发送验证码
			 */
			handleSendVerCode() {
				// 保存this
				let _this = this;
				// 从this里结构出来phone
				let {
					phone
				} = this;

				if (!phone) {
					this.$message.info(this.i18n['请输入手机号']);
					return false;
				}
				// 如果手机号不正确就提示用户
				if (!validate(phone, 'phone')) {
					this.$message.info(this.i18n['请正确输入手机号']);
					return false;
				}
				// 验证手机号 end

				// 如果有倒计时，return false
				if (this.beginning) return false;

				this.verCodeBtnLoading = true; // 显示加载状态
				_this.beginning = true;

				/**
				 * @desc 请求验证码接口
				 * @param {Object} {} - 参数
				 * @param {Boolean} {}.is_test - 是否是测试环境
				 * @param {String} {}.mobile - 手机号
				 * @param {String} {}.type - 类型
				 */
				this.$util.throttle(() => {
					this.$api
						.post(global.apiUrls.GetVerifyCode, {
							is_test: global.IS_DEV,
							mobile: phone,
							type: '3'
						})
						.then(res => {
							// 改加载状态为false
							_this.verCodeBtnLoading = false;
							// 如果后台返回的code码为1
							if (res.data.code == 1) {
								// 清除倒计时,防抖作用
								clearInterval(_this.timer);
								_this.timer = setInterval(() => {
									if (_this.time == 1) {
										//倒计时结束就清楚这个倒计时
										clearInterval(_this.timer);
										_this.time = 60; // 倒计时60s
										_this.beginning = false; // 是否显示倒计时改为false
										return;
									}
									_this.time--;
								}, 1000);
								// 向用户发送提示
								if (res.data.data.code) _this.$message.info(_this.i18n['验证码为'] + res.data.data
									.code);
							} else {
								_this.beginning = false; // 是否显示倒计时改为false
								// 如果报错，向用户提示
								_this.$message.info(res.data.msg);
							}
						})
						.catch(function(err) {
							_this.beginning = false; // 是否显示倒计时改为false
							// 接口错误打印错误
							console.log(err);
						});
				}, 2000, true)
			},
			/**
			 * @event 跳转到邮箱登录页面
			 */
			emailLogin() {
				uni.redirectTo({
					url: '/pages/user/login/login-email-code/index'
				});
			},
			/**
			 * @event 微信登陆
			 */
			wxLogin() {
				let _this = this;
				// #ifdef APP-PLUS
				// 如果是app环境打开微信
				if (
					plus.runtime.isApplicationExist({
						pname: 'com.tencent.mm',
						action: 'weixin://'
					})
				) {
					uni.getProvider({
						service: 'oauth',
						success: function(res) {
							console.log(res);
							// 如果支持微信等，就执行 wx_login_fn 方法
							if (~res.provider.indexOf('weixin')) {
								_this.wx_login_fn();
							}
						},
						fail: function(err) {
							// api错误是打印错误
							console.log(err);
						}
					});
				} else {
					// 调起失败时提醒用户
					this.$message.info(this.i18n['请安装微信后再使用此功能']);
				}
				// #endif
			},
			/**
			 * @function 微信授权登录
			 */
			wx_login_fn() {
				let _this = this;
				/**
				 * @desc uniapp的登陆api
				 * @param {String} provider - 登录服务提供商
				 * @param {login~success} loginRes - 接口调用成功时的回调函数
				 */
				uni.login({
					provider: 'weixin',
					/**
					 * @callback login~success
					 * @param {Object} loginRes - api返回来的信息
					 */
					success: function(loginRes) {
						/**
						 * @desc 获取用户信息
						 * @param {String} provider - 登录服务提供商
						 * @param {Funtion} success - 接口调用成功时的回调函数
						 */
						uni.getUserInfo({
							provider: 'weixin',
							/**
							 * @callback success
							 * @param {Object} infoRes - api返回来的信息
							 */
							success: function(infoRes) {
								// 显示加载状态
								uni.showLoading({
									title: _this.i18n['加载中']
								});
								/**
								 * @let {String} nickName - 结构出来的变量昵称
								 * @let {String} avatarUrl - 解构出来的头像链接
								 * @let {String} gender - 结构出来的性别
								 */
								let {
									nickName,
									avatarUrl,
									gender
								} = infoRes.userInfo;
								// #ifdef APP-PLUS
								let clientId = plus.push.getClientInfo().clientid || '';
								console.log('clientId', clientId);
								//  @const {Number} appSystem - 判断设备类型 1：ios；2：安卓；
								let appSystem = uni.getSystemInfoSync().platform == 'ios' ? 1 : 2;
								// #endif
								console.log(infoRes.userInfo.unionId, 'app微信登录');
								/**
								 * @description 第三方登录请求接口
								 */
								_this.$api
									.post(global.apiUrls.postUserSocialLogin, {
										type: 1,
										wx_unionid: infoRes.userInfo.unionId,
										qq_unionid: '',
										wb_unionid: '',
										clientId: clientId || '',
										appSystem: appSystem || '',
										nickname: nickName,
										avatar: avatarUrl,
										gender: gender
									})
									.then(res => {
										// 保存用户信息
										global.tempUserLoginInfo = infoRes.userInfo;
										// 关闭加载效果
										uni.hideLoading();
										if (res.data.code == 1) {
											_this.$message.info(res.data.msg);
											/**
											 * @description 向Vux发送用户信息保存
											 * @param {String} updateUserInfo - 调用的方法名称
											 * @param {Object} res.data.data.userinfo - 用户信息
											 */
											_this.$store.commit('updateUserInfo', res.data.data
												.userinfo);
											setTimeout(() => {
												uni.navigateBack();
											}, 800);
										} else if (res.data.code == -999) {
											/**
											 * @description 清除当前页面，跳转到绑定手机页面
											 */
											_this.$urouter.redirectTo({
												url: _this.PAGE_BASE_URL +
													'bind-phone/index',
												params: {
													unionId: infoRes.userInfo.unionId,
													openId: infoRes.userInfo.openId,
													sex: infoRes.userInfo.gender,
													nickName: infoRes.userInfo
														.nickName,
													avatarUrl: infoRes.userInfo
														.avatarUrl,
													authType: 'wx_unionid'
												}
											});
											// 点击手机号账号登录按钮
										} else if (res.code == -1) {
											_this.$message.info(res.data.msg);
											return;
										}
									})
									.catch(err => {
										uni.hideLoading();
										console.log(err);
									});
							}
						});
					},
					error: function(err) {
						uni.hideLoading();
						console.log(err);
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.warp {
		background: #FFFFFF;
		height: 100vh;

		.top {
			height: 480rpx;
			position: relative;
			// background-image: url('../../static/login-bg.png');
			// background-size: cover;
			// background-repeat: no-repeat;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.bg_img {
				height: 100%;
				width: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
			}

			.logo {
				width: 180rpx;
				height: 180rpx;
				position: relative;
				z-index: 3;
			}

			.name {
				font-size: 40rpx;
				color: #333333;
				margin-top: 32rpx;
			}
		}

		.main {
			padding: 0 32rpx;
			margin-top: -12rpx;
			position: relative;
			z-index: 4;

			.fu-input {
				display: flex;
				border-radius: 88rpx;

				.fu-input-type {
					width: 34rpx;
					height: 34rpx;
				}

				.fu-input-main {
					flex: 1;
					margin-left: 16rpx;
				}

				.fu-get-verify {
					color: $codeColor;
					text-align: right;
					padding-right: 20rpx;
				}
			}

			// 微信登录按钮 start
			.fu-login-btn {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 88rpx;
				margin-top: 80rpx;
				color: #fff;
				opacity: 1;
				border-radius: 50rpx;
				background: $bgtheme;

				&:after {
					border: 0;
				}

				.fu-wx-pic {
					width: 44rpx;
					height: 36rpx;
				}
			}

			// 微信登录 end
		}

		.bottom-box {
			width: 100%;
			position: fixed;
			bottom: 60rpx;
			bottom: calc(60rpx + constant(safe-area-inset-bottom));
			bottom: calc(60rpx + env(safe-area-inset-bottom));

			.third-box {
				width: 100%;
				// margin-bottom: 32rpx;
			}

			.fu-privacy {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.checkbox-img {
					width: 24rpx;
					height: 24rpx;
					margin-right: 8rpx;
				}

				.fu-action {
					color: #4177DD;
				}
			}
		}
	}
</style>
